<template>
  <page-container>
    <a-spin :spinning="spinning" tip="正在加载...">
      <a-card size="small">
        <span style="width: 30%">创建时间：</span>
        <a-space style="width: 70%" direction="vertical">
          <!-- <a-range-picker @change="pickerChange" :format="dateFormat" /> -->
          <pickers @setTime="pickerChange" />
        </a-space>
      </a-card>

      <div class="cardClass">
        <a-card v-for="item in totalList" :key="item.status" size="small">
          <a-row>
            <a-col :span="16">
              <div class="coltotal">
                <div>{{ item.status }}</div>
                <div class="colsum">{{ item.sum }}</div>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="image">
                <img src="@/assets/route.png" />
              </div>
            </a-col>
          </a-row>
        </a-card>
      </div>
      <a-table
        style="margin-top: 20px"
        :pagination="pagination"
        :data-source="dataStatistics"
        :columns="columnsStatistics"
      />
      <a-pagination
        v-if="totalCount"
        style="text-align: center; margin-top: 20px"
        show-quick-jumper
        show-size-changer
        v-model:current="statisticsList.page"
        :pageSize="statisticsList.size"
        :total="totalCount"
        @change="onChange"
        @showSizeChange="onShowSizeChange"
        :pageSizeOptions="['10', '20', '30', '50']"
      />
    </a-spin>
  </page-container>
</template>

<script lang="ts">
import { defineComponent, ref, onActivated } from 'vue';
import { getBasicTotal, getBasicTotalList } from '@/api/smart-tools/index';
import { columnsStatistics } from '@/views/smart-tools/typing';
import pickers from '@/components/s-picker/picker.vue';
interface statisticsItem {
  page: number;
  size: number;
  callTimeStart?: string;
  callTimeEnd?: string;
}

export default defineComponent({
  name: 'singleStatistics',
  setup() {
    const statisticsList = ref<statisticsItem>({
      page: 1,
      size: 10,
      callTimeStart: '',
      callTimeEnd: '',
    });
    const totalCount = ref<number>();
    const dataStatistics = ref<any>([]);
    const totalList = ref<any>([]);
    const dateFormat = 'YYYY-MM-DD';
    const spinning = ref<boolean>(false);
    const pagination = ref<boolean>(false);

    //头部接口
    const basicTotal = async () => {
      const res = await getBasicTotal(statisticsList.value);
      if (res.code === 200) {
        totalList.value = res.data;
      }
    };

    //列表接口
    const basicTotalList = async () => {
      spinning.value = true;
      const res = await getBasicTotalList(statisticsList.value);
      spinning.value = false;
      if (res.code === 200) {
        dataStatistics.value = res.data.details;
        totalCount.value = res.data.count;
      }
    };

    //时间选择器
    const pickerChange = val => {
      statisticsList.value.page = 1;
      statisticsList.value.size = 10;
      statisticsList.value.callTimeStart = val[0] ? val[0] : '';
      statisticsList.value.callTimeEnd = val[1] ? val[1] : '';
      basicTotal();
      basicTotalList();
    };

    //分页
    const onChange = async (pageNumber: number) => {
      statisticsList.value.page = pageNumber;
      basicTotalList();
    };
    const onShowSizeChange = (current: number, pageSize: number) => {
      statisticsList.value.page = 1;
      statisticsList.value.size = pageSize;
      basicTotalList();
    };

    onActivated(() => {
      basicTotal();
      basicTotalList();
    });

    return {
      spinning,
      totalCount,
      totalList,
      dateFormat,
      dataStatistics,
      columnsStatistics,
      pagination,
      statisticsList,
      //方法
      onChange,
      pickerChange,
      onShowSizeChange,
    };
  },
  components: {
    pickers,
  },
});
</script>

<style lang="less" scoped>
.cardClass {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  .ant-card {
    width: 19%;
    height: 140px;
  }
}
.coltotal {
  padding: 10px;
  .colsum {
    color: #fff;
    font-size: 50px;
  }
}
.image {
  display: flex;
  align-items: center;
  height: 100%;
}
</style>
